<template>

<div>
  <el-row>
  <el-col :span="6">【题型】：{{dataList.questionType}}</el-col>
  <el-col :span="6">【编号】：{{dataList.remarks}}</el-col>
  <el-col :span="6">【难度】：{{dataList.difficulty}}</el-col>
  <el-col :span="6">【标签】：{{dataList.tags}}</el-col>
  <el-col :span="6">【学科】：{{dataList.subjectName}}</el-col>
  <el-col :span="6">【目录】：{{dataList.directoryName}}</el-col>
  <el-col :span="6">【方向】：{{dataList.direction}}</el-col>
</el-row>
<el-divider></el-divider>
<div class="type">
  <span> 【题干】：</span> <br>
 <div class="tigan"> <span>{{dataList.question}}</span></div>
</div>

<div> <span>单选题 选项：（以下选中的选项为正确答案）</span> </div>
<div class="radio" v-if="dataList.questionType==='单选'">
    <el-radio-group v-model="radio">
    <div v-for="item in dataList.options" :key="item.id"><el-radio  :label="item.code">{{item.title}}</el-radio></div>
  </el-radio-group>
</div>
<div class="checkbox" v-if="dataList.questionType==='多选'">
    <el-radio-group   v-model="radio">
    <div v-for="item in dataList.options" :key="item.id"><el-checkbox  :label="radio">{{item.title}}</el-checkbox></div>
  </el-radio-group>
</div>
<el-divider></el-divider>
<div>
  <span> 【参考答案】：</span>
    <el-button type="danger" @click="vadio">视频答案解析</el-button>
    <div v-if="isvadio"><video :src="dataList.videoURL" controls :poster='dataList.videoURL'></video></div>
</div>
<el-divider></el-divider>
<div>
  <span>【答案解析】：</span>
  <span>{{dataList.chkRemarks}}</span>
</div>
<el-divider></el-divider>
<div>
  <span>【题目备注】：</span>
  <span>{{dataList.chkRemarks}}</span>
</div>
 <div class="btn"> <el-button type="primary" @click="close">关闭</el-button></div>
</div>

</template>

<script>
import { detail } from '@/api/hmmm/questions'
import { difficulty, questionType } from '@/api/hmmm/constants'
export default {
  name: 'preview',
  data () {
    return {
      isvadio: false,
      radio: '',
      checkList: [],
      isRido: false,
      dataList: {},
      difficultys: ''// 难度
    }
  },
  props: {
    id: {
      type: Number
    }
  },
  created () {
    this.detail()
  },
  methods: {
    close () {
      this.$emit('close')
    },
    vadio () {
      this.isvadio = true
    },
    async detail () {
      const res = await detail({ id: this.id, isNext: true })
      console.log(res)
      this.dataList = res.data

      console.log(this.dataList)
      this.dataList.options.forEach(item => {
        if (item.isRight === 1) {
          this.radio = item.code
        }
      })

      difficulty.forEach(item => {
        if (String(item.value) === this.dataList.difficulty) {
          this.dataList.difficulty = item.label
        }
      })
      questionType.forEach(item => {
        if (String(item.value) === this.dataList.questionType) {
          this.dataList.questionType = item.label
        }
      })
    }
  }
}
</script>

<style scoped lang='scss'>
.tigan{
  margin: 10px 0;
  color: blue;
}
.el-col{
  margin-top: 20px;
}
.type{
  margin-top: 10px;
}
.radio{
  margin-top: 10px;
  div{
    margin-top: 20px;
  }
}
.checkbox{
   margin-top: 10px;
  div{
    margin-top: 20px;
  }
}

.btn {
  position: absolute;
  bottom:  10px;
  right :10px;
}
  </style>
